<!-- Component : SearchBox  - Begin  -->
<%--<form class="no_margin" id="form__${id}" data-bind="submit: textUpdated" >--%>
<%--  <input type="text" class="input-medium search-query logo ${cssClasses}" id="${id}" data-bind='value: firstName' >--%>
<%--</form>--%>
<%--<script type="text/javascript">--%>



<%--(function($) {--%>
<%----%>
<%--	console.log("LOG: %s", 'Component : SearchBox  - Begin. !');--%>
<%----%>
<%--	// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI--%>
<%--	var __${id}_Model = function () {--%>
<%----%>
<%--		var self = this;--%>
<%----%>
<%--		--%>
<%--		self.firstName = ko.observable("Bert"),--%>
<%--	    --%>
<%--		self.textUpdated = function() {--%>
<%--	    	//console.log("LOG: %s - %s", 'SearchBox Updated : ',self.firstName());--%>
<%----%>
<%--	    	var event = new $.Event();--%>
<%--	    	event.type          = "searchBoxChanged";--%>
<%--	    	event.target        = $("${id}");--%>
<%--	    	event.model         = self;--%>
<%--	    	event.searchBoxName = "${id}";--%>
<%--	    	event.searchText    = self.firstName();--%>
<%--	    	 --%>
<%--            $(document).trigger(event);--%>
<%--	    	--%>
<%--	    }--%>
<%--	    --%>
<%--	}--%>
<%--	--%>
<%----%>
<%--	console.log("LOG: %s - %o", 'Component : SearchBox', $("#${id}"));--%>
<%--	--%>
<%--	$("#form__${id}").koApplyBindings(new __${id}_Model());	   --%>
<%----%>
<%--	console.log("LOG: %s", 'Component : SearchBox  - End !');--%>
<%--	--%>
<%--})(jQuery);	--%>
<%--</script>--%>
<!-- Component : SearchBox  - End  -->